<template>
  <div class="dashboard-container" v-if="show">
    <el-card>
      <div class="top">
        <el-radio-group v-model="date" @change="changeDate">
          <el-radio-button label="1">今天</el-radio-button>
          <el-radio-button label="2">昨天</el-radio-button>
          <el-radio-button label="3">近一周</el-radio-button>
          <el-radio-button label="4">近半月</el-radio-button>
          <el-radio-button label="5">最近一个月</el-radio-button>
        </el-radio-group>
        <el-form ref="query" :model="query" label-width="100px">
          <el-form-item style="margin-bottom:0px" label="操作日期">
            <el-date-picker
              ref="picker"
              v-model="query.timeArr"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="checkInfo">查看数据</el-button>
          <el-button type="primary" @click="getInfo">刷新</el-button>
        </div>
      </div>
    </el-card>
    <div v-loading="loading">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="8" :md="6" style="margin-top: 5px;">
          <el-card>
            <div class="tag-item">
              <span>后台充值</span>
              <span v-if="permission">{{totalInfo.houtai}}</span>
              <span v-else>*****</span>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="12" :sm="8" :md="6" style="margin-top: 5px;">
          <el-card>
            <div class="tag-item">
              <span>前台微信充值</span>
              <span v-if="permission">{{totalInfo.front_wechat}}</span>
              <span v-else>*****</span>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="12" :sm="8" :md="6" style="margin-top: 5px;">
          <el-card>
            <div class="tag-item">
              <span>直接支付金额</span>
              <span v-if="permission">{{totalInfo.draw_price}}</span>
              <span v-else>*****</span>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="12" :sm="8" :md="6" style="margin-top: 5px;">
          <el-card>
            <div class="tag-item">
              <span>发货金额</span>
              <span v-if="permission">{{totalInfo.drive_price}}</span>
              <span v-else>*****</span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" style="margin-top: 5px;">
          <el-card>
            <div class="tag-item">
              <span>前台支付宝充值</span>
              <span v-if="permission">{{totalInfo.front_ali}}</span>
              <span v-else>*****</span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" style="margin-top: 5px;">
          <el-card>
            <div class="tag-item">
              <span>总计收入</span>
              <span v-if="permission">{{totalInfo.sum_price}}</span>
              <span v-else>*****</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 40px;">
        <el-col :xs="12" :sm="8" :md="6" style="margin-top: 5px;">
          <el-card>
            <div class="tag-item">
              <span>拉新下级奖励</span>
              <span v-if="permission">{{totalInfo.front_new}}</span>
              <span v-else>*****</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- 弹出框 -->
    <!-- <el-dialog title="查看密码" :visible.sync="dialogVisible" width="20%" :before-close="handleClose">
      <el-input v-model="password" placeholder="请输入查看密码"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="check">确 定</el-button>
      </span>
    </el-dialog>-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { dashboardInfo } from '@/api/user'
import { parseTime } from '@/utils/index'
import store from '@/store/index'

export default {
  name: 'Dashboard',
  data() {
    return {
      date: '1',
      infoData: '',
      pieData: [],
      totalInfo: '',
      permission: true,
      // dialogVisible: false,
      password: '',
      show: false,
      loading: true,
      query: {
        timeArr: [new Date(), new Date()]
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '近半月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  computed: {},
  mounted() {
    console.log(store.getters.roles.includes('account'))

    if (store.getters.roles.includes('account')) {
      this.show = true
      this.infoData =
        parseTime(new Date(), '{y}-{m}-{d}') +
        ',' +
        parseTime(new Date(), '{y}-{m}-{d}')
      this.$set(this.query, 'timeArr', [new Date(), new Date()])

      this.getInfo()
      // if (!this.permission) {
      this.init()
    } else {
      this.show = false
    }

    // }
  },
  deactivated() {},
  activated() {
    console.log('zoule')
  },
  methods: {
    async getInfo() {
      this.loading = true
      this.pieData = []
      const res = await dashboardInfo({ add_time: this.infoData })
      this.totalInfo = res.data
      res.data.activeUser.forEach((item) => {
        const info = {
          value: item.total_count,
          name: item.amount_range
        }
        this.pieData.push(info)
      })
      this.loading = false
      console.log(res)
      this.init()
    },
    changeDate() {
      console.log(this.date)
      if (this.date == 1) {
        this.infoData =
          parseTime(new Date(), '{y}-{m}-{d}') +
          ',' +
          parseTime(new Date(), '{y}-{m}-{d}')
        this.$set(this.query, 'timeArr', [new Date(), new Date()])
        this.getInfo()
      } else if (this.date == 2) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
        end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
        this.$set(this.query, 'timeArr', [start, end])

        this.infoData =
          parseTime(start, '{y}-{m}-{d}') +
          ',' +
          parseTime(start, '{y}-{m}-{d}')
        this.getInfo()
      } else if (this.date == 3) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        this.$set(this.query, 'timeArr', [start, end])
        this.infoData =
          parseTime(start, '{y}-{m}-{d}') + ',' + parseTime(end, '{y}-{m}-{d}')
        this.getInfo()
      } else if (this.date == 4) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
        this.$set(this.query, 'timeArr', [start, end])
        this.infoData =
          parseTime(start, '{y}-{m}-{d}') + ',' + parseTime(end, '{y}-{m}-{d}')
        this.getInfo()
      } else if (this.date == 5) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        this.$set(this.query, 'timeArr', [start, end])
        this.infoData =
          parseTime(start, '{y}-{m}-{d}') + ',' + parseTime(end, '{y}-{m}-{d}')
        this.getInfo()
      }
    },
    init() {},
    checkInfo() {
      // if (!this.permission) {
      //   this.dialogVisible = true;
      // } else {
      this.infoData =
        parseTime(this.query.timeArr[0], '{y}-{m}-{d}') +
        ',' +
        parseTime(this.query.timeArr[1], '{y}-{m}-{d}')
      this.getInfo()
      // }
    }
  }
}
</script>

<style lang='scss' scoped>
.dashboard-container {
  // height: 100%;
  // background: url('~@/assets/dashboard.png') repeat;
  // background-size: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.top {
  display: flex;
  justify-content: space-between;
  // padding: 20px;
}
.tag-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  // align-items: ;
  span:nth-child(1) {
    font-size: 26px;
    font-weight: 500;
    color: #1890ff;
  }
  span:nth-child(2) {
    text-align: right;
    font-size: 22px;
    font-weight: 500;
    // color: #1890ff;
  }
}
</style>
